.postItem {
  height: 280px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 20px;
  .coverImg {
    overflow: hidden;
    width: 45%;
    height: 100%;
    order: 1;
    &.right {
      order: 3;
    }
  }
  .postInfo {
    width: 55%;
    order: 2;
    display: inline-block;
    overflow: hidden;
    padding: 0 40px;
    box-sizing: border-box;
    .postTitle {
      display: block;
      margin-bottom: 0.3rem;
      font-size: 1.8rem;
      line-height: 1.4;
      font-weight: 500;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      -webkit-line-clamp: 2;
      font-family: Titillium Web, PingFang SC, Hiragino Sans GB,
        'Microsoft YaHei', Helvetica Neue, Helvetica, Arial, sans-serif;
      margin-bottom: 0.5rem;
      &:hover {
        color: #49b1f5;
        text-decoration: underline;
      }
    }
    .postContent {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      height: 90px;
      box-sizing: border-box;
      word-break: break-all;
      margin-top: 0.5rem;
    }
  }
}

.noCover {
  .postInfo {
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  .postItem {
    flex-direction: column;
    height: auto;
    .coverImg {
      width: 100%;
      height: 230px;
      order: 1;
      &.right {
        order: 1;
      }
    }
    .postInfo {
      width: 100%;
      padding: 18px 14px;
    }
  }
}
